<template>
	<view class="wrap">
		<view class="wrap-list">
			<view class="wrap-list-item wrap-list-l display-flex">
				<view class="wrap-list-item-atv">
					<up-image src="/static/images/agreeBg.png" width="64rpx" height="64rpx" :radius="10" :fade="false"></up-image>
				</view>
				<view class="wrap-list-item-info" @click="handleClick">
					<view class="wrap-list-item-info-handle">
						<up-image src="/static/images/agreeRecognize.png" width="84rpx" height="84rpx" :fade="false" bgColor="transparent"></up-image>
					</view>
					<view class="wrap-list-item-info-t align-center">
						<up-image src="/static/images/agreeBg.png" width="120rpx" height="120rpx"
							:radius="6"></up-image>
						<view class="wrap-list-item-info-t-r">
							<view class="user-name">
								昵称
							</view>
						</view>
					</view>
					<view class="wrap-list-item-info-tips align-center">
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
					</view>
					<view class="wrap-list-item-info-b wrap-list-item-info-tips align-center">
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-list-item wrap-list-r display-flex">
				<view class="wrap-list-item-info" @click="handleClick">
					<view class="wrap-list-item-info-t align-center">
						<up-image src="/static/images/agreeBg.png" width="120rpx" height="120rpx"
							:radius="6" :fade="false"></up-image>
						<view class="wrap-list-item-info-t-r">
							<view class="user-name">
								昵称
							</view>
						</view>
					</view>
					<view class="wrap-list-item-info-tips align-center">
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
						<view class="wrap-list-item-info-tips-item align-justify-center">
							<view class="wrap-list-item-info-tips-item-sure"></view>
							实名
						</view>
					</view>
					<view class="wrap-list-item-info-b wrap-list-item-info-tips align-center">
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
						<view class="wrap-list-item-info-tips-item">
							天津南开
						</view>
					</view>
				</view>
				<view class="wrap-list-item-atv">
					<up-image src="/static/images/agreeBg.png" width="64rpx" height="64rpx" :radius="10" :fade="false"></up-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	const handleClick = () => {
		uni.navigateTo({
			url:'/pages/home/detail'
		})
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;

		&-list {
			&-item {
				margin-bottom: 60rpx;
				&-atv {
					margin-right: 16rpx;
				}

				&.wrap-list-r {
					justify-content: flex-end;
					.wrap-list-item-atv {
						margin-left: 16rpx;
						margin-right: 0;
					}
				}

				&-info {
					position: relative;
					width: 510rpx;
					height: 392rpx;
					padding: 40rpx 0 40rpx 40rpx;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					
					&-handle{
						position: absolute;
						top: 8rpx;
						right: 8rpx;
					}

					&-t {
						&-r {
							margin-left: 16rpx;

							.user-name {
								font-weight: 500;
								font-size: 34rpx;
								color: #222222;
							}
						}
					}

					&-tips {
						margin-top: 16rpx;

						&-item {
							width: 82rpx;
							height: 34rpx;
							margin-right: 16rpx;
							background-color: #57EE91;
							font-size: 22rpx;
							color: #ffffff;
							border-radius: 4rpx 4rpx 4rpx 4rpx;

							&-sure {
								width: 22rpx;
								height: 22rpx;
								margin-right: 4rpx;
								background: url('/static/images/sure.png') center/cover no-repeat;
							}
						}
					}

					&-b {
						flex-wrap: wrap;

						.wrap-list-item-info-tips-item {
							width: auto;
							height: auto;
							margin-bottom: 16rpx;
							padding: 10rpx 14rpx;
							box-sizing: border-box;
							color: #444444;
							font-size: 26rpx;
							background-color: #F3F3F3;
						}
					}
				}
			}
		}
	}
</style>